Cascading Style Sheets
CSCE 242
University of South Carolina
José M. Vidal [1]
http://jmvidal.cse.sc.edu/talks/css/ [2]
A brief introduction to CSS, based on:
1 CSS
- XHTML is concerned only with structural issues,
while CSS is concerned with display issues.
- CSS gives the designer more expressive power
- Set color of text and background.
- Create borders around any element.
- Change space around any element.
- Change how text is capitalized and decorated.
- Change text spacing
- Style sheets are associated with an XHTML (or XML) page. So
changes in style are easy and a style can be used for many
pages.
- CSS often results in smaller total file sizes.
- One CSS file for entire website.
Note:
In the beginning, HTML started out as a structural language
and it was left up to the browsers to decide how things should
look. For example, the browser would decide on the spacing
before and after a <p>, and what color to give a
hyperlink (usually, blue). Once the web became popular, web
page designers wanted more control over how their pages would
look so new tags, such as font, were added to HTML. As such,
the language started to contain both structural and display
elements, making it very complicated to use.
CSS was developed with the goal of being the sole repository
of all display information. That is, everything that tells us
how things should look on the screen (or the page, or the
phone) should be in the style sheet. Also, CSS gave the
designer more expressive power.
1.1 Example
- An example of a webpage with a style sheets is:
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<meta name="AUTHOR" content="Jose M Vidal"></meta>
<link rel="stylesheet" type="text/css"
href="../xslides-medwhite.css" title="White" media="all" />
<link rel="alternate stylesheet" type="text/css"
href="../xslides-medblue.css" title="Blue" media="all" />
<link rel="alternate stylesheet" type="text/css"
href="../xslides-usc.css" title="USCTheme" media="all" />
<style type="text/css">
@import url(sheet2.css);
h1 {color: blue;}
body {background: yellow'}
</style>
</head>
<body>
The background is in yellow.
<h1>This will be in blue</h1>
</body>
</html>
- Or, view source on this slide if you are online.
- The
link
tag must be inside the
head
.
- New stylesheets can also be loaded with the
import
directive.
- Alternative stylesheets can provide very different appearances.
2 CSS Structure
- In the example
h1 {color: white;}
we have that
h1 |
selector |
{color: white;} |
declaration |
color |
property |
white |
value |
- Selectors can be grouped as in
h1, h2, h3 {color: green;}
- Declarations can be grouped as in
h1 {color: white; background: black;}
2.1 Class and ID Selectors
- Any element can have a
class
attribute:
<p class="lie">This is a lie</p>
whose value can be used as a selector:
.lie {color: purple;}
- Similarly, any element can have an
id
attribute:
<p id="thebiglie">I will have it by tomorrow</p>
whose value can be used as a selector:
#thebiglie {color: purple;}
id
s should only be used one per document,
while class
can be used many times.
- Pseudo-classes represent run-time state. They are:
:link
a hyperlink that has not been
visited.
:visited
a hyperlink that has been
visited.
:active
a hyperlink that is being clicked
on.
:hover
an element over which the mouse is pointing.
For example:
a:visited { color: black}
a:active { color: red }
a:hover { background: #ffa }
- The selector can also be contextual:
h1 em {color: blue;}
2.2 The Cascade
<head>
<style type="text/css">
.blue {color:blue;}
h1 {color:red;}
</style></head>
<body>
<h1 class="blue">This is blue</h1></body>
The property value that applies to a tag is
- The one in the most specific declaration.
- If there are more than one, then use the one defined later in the file:
<head>
<style type="text/css">
.green {color: green}
a {color: yellow;}
h1 {color: red;}
h1 {color: blue;}
</style>
</head>
<body>
<h1>This is blue <a href="/">this is yellow</a></h1>
<h1 class="green">This is green</h1>
</body>
2.3 Element Types
- Block-level elements, such as p, h1, div, and
body, are always displayed on a line by themselves. They can
only be children of other block-level elements.
- Inline elements, such as a, em, and span, do
not force the start of a new line. They can be children of any
other element.
- List-item elements include only li. They have a
"bullet".
- We can change the type of any element with the
display
property.
display: block | inline | list-item | none
- Elements can also float
2.4 Layout
If it GLISTENS, gobble it!!
But was he mature enough last night at the lesbian masquerade?
Civilization is fun! Anyway, it keeps me busy!!
Don't worry, nobody really LISTENS to lectures in MOSCOW, either!
.. FRENCH, HISTORY, ADVANCED CALCULUS, COMPUTER PROGRAMMING,
BLACK STUDIES, SOCIOBIOLOGY!.. Are there any QUESTIONS??
Everywhere I look I see NEGATIVITY and ASPHALT...
FOOLED you! Absorb EGO SHATTERING impulse rays, polyester poltroon!!
GOOD-NIGHT, everybody.. Now I have to go administer FIRST-AID
to my pet LEISURE SUIT!!
He probably just wants to take over my CELLS and then EXPLODE
inside me like a BARREL of runny CHOPPED LIVER! Or maybe he'd
like to PSYCHOLOGICALLY TERRORIZE ME until I have no objection
to a RIGHT-WING MILITARY TAKEOVER of my apartment!! I guess
I should call AL PACINO!
I am having FUN... I wonder if it's NET FUN or GROSS FUN?
Just imagine you're entering a state-of-the-art CAR WASH!!
KARL MALDEN'S NOSE just won an ACADEMY AWARD!!
Leona, I want to CONFESS things to you..
I want to WRAP you in a SCARLET ROBE trimmed with POLYVINYL CHLORIDE..
I want to EMPTY your ASHTRAYS...
My FAVORITE group is "QUESTION MARK and THE MYSTERIANS"...
Now my EMOTIONAL RESOURCES are heavily committed to 23\% of the
SMELTING and REFINING industry of the state of NEVADA!!
On SECOND thought, maybe I'll heat up some BAKED BEANS and
watch REGIS PHILBIN.. It's GREAT to be ALIVE!!
PUNK ROCK!! DISCO DUCK!! BIRTH CONTROL!!
QUIET!! I'm being CREATIVE!! Is it GREAT yet? It's s'posed to
SMOKEY THE BEAR...
Remember, if you try to ESCAPE, many APARTMENT HOPPING ALCOHOLICS will
SIMONIZE your HALLWAYS!! This is your LAST WARNING!!
Sometime in 1993 NANCY SINATRA will lead a BLOODLESS COUP on GUAM!!
Then, it's off to RED CHINA!!
UH-OH!! I put on ``GREAT HEAD-ON TRAIN COLLISIONS of the 50's''
by mistake!!!
Vote for ME -- I'm well-tapered, half-cocked, ill-conceived and
TAX-DEFERRED!
What I need is a MATURE RELATIONSHIP with a FLOPPY DISK...
Xerox your lunch and file it under ``sex offenders!''
3 Units
- Named colors: aqua, gray, navy, silver, black, green,
olive, teal, blue, lime, purple, white, fuchsia, maroon, red,
and yellow.
h1 {color:
lime;}
- Color by
rgb:
rgb(0%,0%,0%)
- Color by hex:
h1 {color:
#FF0000;}
or short hex:h1 {color::
#F00;}
- Absolute lengths can be in inches, centimeters, millimeter, points (72 per inch),
or picas (12 points).
p {font-size: 10in;}
p {font-size: 10cm;}
p {font-size: 10mm;}
p {font-size: 10pt;}
p {font-size: 10pc;}
- Relative lengths can be in em (the value of font-size), ex
(the height of lower case x) and px (pixels).
Note:
Pixels are especially useful for sizing images since those
have a particular pixel width and height. The size of fonts
should always use a relative length so that the page can be
viewed in machines with different resolutions.
4 Text Properties
{text-indent: length | percentage;}
how much to indent the first line
of the element.
{text-align: left | center | right | justify;}
how to justify the text.
{white-space: pre | nowrap | normal}
how to
handle whitespace within the xhtml.
{line-height: length | percentage | normal}
the space between lines.
{vertical-align: baseline | sub | super | bottom | text-bottom
| middle | top | text-top | percentage}
how to align the text
vertically.
{word-spacing: length | normal;}
spacing between words.
{letter-spacing: length | normal;}
spacing between letters in a word.
{text-transform: uppercase | lowercase | capitalize | none;}
how to transform the text.
{text-decoration: none | underline | overline | line-through | blink}
how to decorate. Can have more
than one value.
5 Fonts
{font-family: family-name | generic-family;}
specify the family, such as
serif [6], sans-serif, monospace, cursive.
{font-weight: normal | bold | bolder | lighter | 100
| 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;}
{font-size: xx-small | x-small | small | medium |
large | x-large | xx-large | smaller | larger | length | percentage;}
is the
size.
{font-style: italic | oblique | normal;}
{font: font-style | font-variant | font-weight
| font-size | font-family;}
collapse all of them into one
line.
6 Colors
{color: color;}
{background-color: color | transparent;}
{background-image: url | none;}
URLs
are given in the form
url(http://planet.com/moon.png)
{background-position: percentage | length
| top | center | bottom || left | center | right;}
specify horizontal then vertical.
{background-attachment: scroll | fixed;}
7 Boxes
Note:
Every element is placed within a box. For example, all the
text inside a <p> is placed in a box by the browser. The
width and height of this box are calculated based on its
placement within the page and the size of the page
itself. However, you can override these by setting your own
width and length. Of course, if you set them too large to fit
in the page they will not be completely visible; the browser
will generally add some scrollbars.
The space beyond this box is determined by the value of
padding. If the element has a background color or image, this
background extends all the way into the padding, but not into
the margin. The border lies at the end of the padding.
7.1 Box Properties
{margin: length | percentage |
auto;}
{margin-top margin-right margin-bottom margin-left:
length | percentage | auto;}
{border-style: none | dotted | dashed | solid |
double | groove | ridge | inset | outset;}
{border-width: thin | medium | thick |
length;}
{border-top-width border-right-width
border-bottom-width border-left-width: thin | medium | thick |
length;}
{border-color: color;}
{padding padding-top padding-right padding-bottom
padding-left: length | percentage;}
{float: left | right | none;}
how should the
element float.
{clear: left | right | both | none;}
Note:
The use of XHTML and CSS establish a clear division between
structure and display which is echoed in personnel assignment
in most companies. That is, you usually see a programming
department in charge of writing the software and an art or
marketing department in charge of the look of the
website. However, smaller companies can only afford one person
for both jobs. Even when there is a separate art department it
is important to understand how layout works so as to provide
the adequate markup. For example, there is no way to separate
the text that lies within one <p>.
8 References
[7]
URLs
- José M. Vidal, http://jmvidal.cse.sc.edu
- http://jmvidal.cse.sc.edu/talks/css/, http://jmvidal.cse.sc.edu/talks/css/
- Cascading Style Sheets, http://www.amazon.com/exec/obidos/ASIN/1565926226/multiagentcom
- Cascading Style Sheets, Level 1, http://www.w3.org/TR/REC-CSS1
- Cascading Style Sheets, Level 2, http://www.w3.org/TR/REC-CSS2
- serif, wikipdeia:Serif
-
, http://www.amazon.com/gp/product/0596527330?ie=UTF8&tag=multiagentcom&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596527330
- CSS
Tutorial, http://www.w3schools.com/css/default.asp
- CSS Zen Garden, http://csszengarden.com
This talk available at http://jmvidal.cse.sc.edu/talks/css/
Copyright © 2009 José M. Vidal
.
All rights reserved.
23 December 2008, 10:02AM